/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback, useState, useEffect } from 'react';
import { Form, Modal, Select, Checkbox, Row, Col } from 'antd';
import { connect } from 'dva';

const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

const GpAuthSetting = ({
  dispatch,
  form,
  onClose,
  onSubmit,
  visible,
  open = '1',
  brand,
  checkedAuth = '',
  id,
  area_id,
}) => {
  const { getFieldDecorator, validateFields, isFieldsTouched, setFieldsValue } = form;
  const [disabled, setDisabled] = useState(open == 0);
  const [authList, setAuthList] = useState([]);
  const [checkedList, setCheckedList] = useState([]);

  const handleOk = useCallback(
    () => {
      const isFormChanged = isFieldsTouched(['disabled', 'scan_type']);
      validateFields((err, value) => {
        if (err) return;
        const { scan_type, ...rest } = value;
        if (isFormChanged) {
          onSubmit &&
            onSubmit({
              scan_type: scan_type.join(','),
              id,
              is_batch: 1,
              area_id,
              ...rest,
            });
        }
      });
      onClose && onClose();
    },
    [id, isFieldsTouched, onClose, onSubmit, validateFields, area_id],
  );

  const onSelectChange = value => {
    setDisabled(value == 0);
  };

  useEffect(
    () => {
      if (visible) {
        if (typeof checkedAuth == 'string') {
          setCheckedList(checkedAuth.split(','));
        }
        setDisabled(open == 0);
        dispatch({
          type: 'allocation/getGpAuthListByBrand',
          payload: {
            brand,
            area_id,
          },
        })
          .then(list => {
            setAuthList(list);
          })
          .catch(() => {
            setAuthList([]);
          });
      }
    },
    [visible, brand, dispatch, checkedAuth, open, area_id],
  );

  useEffect(
    () => {
      if (disabled) {
        setFieldsValue({ scan_type: ['1', '2', '3', '4', '5', '6', '0'] });
      }
    },
    [disabled, setFieldsValue],
  );

  return (
    <Modal destroyOnClose title="共配权限控制" visible={visible} onOk={handleOk} onCancel={onClose}>
      <Form {...formItemLayout}>
        <Form.Item label="共配权限控制">
          {getFieldDecorator('disabled', {
            initialValue: open,
          })(
            <Select onChange={onSelectChange}>
              <Option value="1">开启</Option>
              <Option value="0">关闭</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="上传权限控制">
          {getFieldDecorator('scan_type', {
            initialValue: checkedList,
          })(
            <Checkbox.Group style={{ width: '100%' }}>
              <Row type="flex" justify="space-between" gutter={[20, 20]}>
                {authList.map(({ type, content }) => (
                  <Col span={8} key={type}>
                    <Checkbox disabled={disabled} value={`${type}`}>
                      {content}
                    </Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>,
          )}
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default connect()(Form.create()(GpAuthSetting));
